#summary {
  position: relative;

  > .bg {
    width: 100%; height: 100%;
    filter: blur(5px);
  }

  > .content {
    width: 70%;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  @media screen and (max-width: 1300px) {
    > .content { width: 90%; }
  }

  h1 {
    font-size: 30px;
    margin-bottom: 50px;
  }

  .intro {
    display: flex;
    align-items: flex-start;
    > ul {
      margin: 0 100px 0 22px;
      > li {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .bolg {
    font-size: 16px;
    display: flex;
    margin-top: 10px;
    > a {
      color: #fff;
      border-radius: 4px;
      padding: 0 12px; margin-right: 10px;
      &.mySite {
        background: #2e8555;
      }
      &.zhihu {
        background: #0084ff;
        &:hover { background: #0077e6; }
      }
      &.juejin {
        background: #1e80ff;
        &:hover { background: #1171ee; }
      }
    }
  }

  .picture { width: 300px; }

  .downArrow {
    font-size: 1.5em;
    margin-top: 50px;
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    animation: down 1.8s linear infinite;
    display: flex; align-items: center;
    > span { font-size: 18px; margin-left: 10px; }
  }
  @keyframes down {
    0% { transform: translate(-50%, 0%); }
    50% { transform: translate(-50%, 100%); }
    100% { transform: translate(-50%, 0%); }
  }
}
